<template>
  <div class="approverdetail">
    <div class="btnTitle">
      <div><el-button type="primary" icon="el-icon-back" size="mini" circle @click="$router.back()" /></div>
      <div class="add" @click="addHander()"><span>+</span> 创 建 </div>
    </div>
    <div class="btnTitle">
      <div>{{ approverObj.name }} （{{ approverObj.type===1?" PMIS ":" 其他 " }}）</div>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="userName"
        label="发起人"
      />
      <el-table-column
        prop="passUserName"
        label="审批人"
      />
      <el-table-column width="180" align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <!-- 跳到审批流程的详情接口 -->
          <!-- <el-button size="small" type="text" @click="editRow(scope.row)">编辑</el-button> -->
          <el-button size="small" type="text" @click="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-approve-person ref="AddPerson" @updataList="updataList" />
  </div>
</template>
<script>
import { getUserProcessList } from '@/api/approval'
import AddApprovePerson from './components/addApprovePerson'
export default {
  name: 'Approverdetail',
  components: {
    AddApprovePerson
  },
  data() {
    return {
      tableData: [],
      approverObj: {}
    }
  },
  mounted() {
    this.approverObj = this.$route.params
    this.getUserProcessList()
  },
  methods: {
    async getUserProcessList() {
      const res = await getUserProcessList(this.approverObj.id)
      this.tableData = res
    },
    updataList() { this.getUserProcessList() },
    deleteRow(_row) {
      this.$refs.AddPerson.delHander(_row)
    },
    editRow(_row) {
      this.$refs.AddPerson.editerHander(_row)
    },
    addHander() {
      this.$refs.AddPerson.addHander()
    }
  }
}
</script>
<style lang="scss" scope>
.approverdetail{
    padding:0 20px;
    .btnTitle{
        padding:10px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        /*color: #3345ff;*/
        font-size: 16px;
        span{
          display: inline-block;
          position: relative;
          top:-1px;
          text-align: center;
          font-weight: bold;
          margin-right: 2px;
          color:#fff;
          background: #3345ff;
          line-height: 12px;
          height: 14px;
          width: 14px;
          border-radius: 100%;
        }
        .add{
          color: #3345ff;
          margin-top: 6px;
        }
    }
}
</style>
